<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>实训报告列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">报告名称: </span>
                    <!-- <el-select
                        v-model="reportValue"
                        placeholder="请选择报告名称"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in reportStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="reportValue" placeholder="请输报告名称" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="deleteList">批量删除</el-button>
                </div>
                <div class="search-item" style="float:right; margin-right:15px;">
                    <el-button type="primary" @click="reportFn(1)">添加</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="100">
                    </el-table-column>
                    <el-table-column  prop="reportName" label="报告名称">
                    </el-table-column>
                    <el-table-column  prop="reportContent" label="报告介绍">
                    </el-table-column>
                    <el-table-column  prop="relationClassNameStr" label="关联班级">
                    </el-table-column>
                    <el-table-column  prop="insertTimeStr" label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- <el-button type="text" size="small" @click="deleteItem(scope.row.id)">删除</el-button> -->
                            <el-button type="text" size="small" @click="reportFn(2, scope.row.id, scope.row.reportName, scope.row.reportContent, scope.row.classIdList)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="reportDialogTitle" :visible.sync="dialogFormVisible" width='450px' @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="报告名称 :" prop="reportName">
                    <el-input v-model="form.reportName" placeholder="请输入报告名称" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="报告介绍 :">
                    <el-input type="textarea" v-model="form.reportDesc" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="选择班级 :" prop="classValue">
                    <el-select v-model="form.classValue" multiple placeholder="请选择" style="width:70%;">
                        <el-option
                        v-for="item in form.classStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="saveSubmitForm('form')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                classId: '',
                projectId: '',
                reportStatus: [
                    {
                        value: '',
                        label: '全部'
                    }
                ],
                reportValue: '',
                tableLoading: false,
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                multipleSelection: [],
                reportDialogTitle: '',
                dialogFormVisible: false,
                reportId: '',
                form: {
                    type: '',
                    reportName: '',
                    reportDesc: '',
                    classStatus: [],
                    classValue: [],
                },
                rules: {
                    reportName: [
                        { required: true, message: '请输入报告名称', trigger: 'blur' }
                    ],
                    classValue: [
                        { required: true, message: '请选择班级', trigger: 'change' }
                    ]
                }
            }
        },
        created () {
            this.init()
            this.initTbale()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/common/search/listClassItem').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.classList.length; i++) {
                            let classJson = {}
                            classJson.label = res.data.classList[i].name
                            classJson.value = res.data.classList[i].id
                            self.form.classStatus.push(classJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                // self.$http.post('/dataplatform/basis/functions/report/t/getTeacherClassReportListForSearch').then(response => {
                //     let res = response.data
                //     if(res.code == '200'){
                //         for (let i = 0; i < res.data.length; i++) {
                //             let reportJson = {}
                //             reportJson.label = res.data[i].reportName
                //             reportJson.value = res.data[i].id
                //             self.reportStatus.push(reportJson)
                //         }
                //     }else if(res.code == '401'){
                //         self.$router.replace({
                //             path:'/login'
                //         })
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // })
            },
            initTbale(){
                let self = this
                self.$http.get('/dataplatform/basis/functions/report/t/getTeacherClassReportList?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&reportName='+self.reportValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.initTbale()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //搜索
            searchFn() {
                this.currentPage = 1
                this.initTbale()
            },
            //关闭弹窗
            closeDialog(){
                this.$refs.form.resetFields()
            },
            //保存表单提交
            saveSubmitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let path, data = {}
                        if(self.form.type == 1){
                            path = '/dataplatform/basis/functions/report/t/addTeacherClassReport'
                            data = {
                                classIdList: self.form.classValue,
                                reportName: self.form.reportName,
                                reportContent: self.form.reportDesc
                            }
                        }else if(self.form.type == 2){
                            path = '/dataplatform/basis/functions/report/t/saveTeacherClassReport'
                            data = {
                                id: self.reportId,
                                classIdList: self.form.classValue,
                                reportName: self.form.reportName,
                                reportContent: self.form.reportDesc
                            }
                        }

                        self.$http.post(path, data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(self.form.type == 1){
                                    self.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })
                                }else if(self.form.type == 2){
                                    self.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                }
                                self.initTbale()
                                self.dialogFormVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //添加修改报告type==1添加Type==2修改
            reportFn(type, id, reportName, reportContent, classIdList){
                let self = this
                if(type == 1){
                    self.reportDialogTitle = '添加报告'
                    self.form.type = 1
                    self.form.reportName = ''
                    self.form.reportDesc = ''
                    self.form.classValue = []
                }else if(type == 2){
                    self.reportDialogTitle = '修改报告'
                    self.form.type = 2
                    self.reportId = id
                    self.form.reportName = reportName
                    self.form.reportDesc = reportContent
                    if (classIdList == null) {
                        self.form.classValue = []
                    }else{
                        self.form.classValue = classIdList
                    }
                }
                self.dialogFormVisible = true
            },
            //删除选中
			deleteList() {
				let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的报告',
                        type: 'warning'
                    })
					return
                }
                let idList = ''
				for(let item in self.multipleSelection){
					if(item == 0){
						idList = self.multipleSelection[item]
					}else{
						idList = idList + '&' + 'idList='+self.multipleSelection[item]
                    }
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.get('/dataplatform/basis/functions/report/t/delTeacherClassReportList?idList='+idList+'').then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.initTbale()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            //删除行
            deleteItem(id){
                let self = this
                self.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.get('/dataplatform/basis/functions/report/t/delTeacherClassReportList?idList='+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.initTbale()
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
				})
            }
        }
    }
</script>
